<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TodoList Jquery</title>
	<script src='./jquery.js'></script>
</head>
<body>
	<div>
		<input id="input" type="text" />
		<button id="btn">提交</button>
		<ul id="list"></ul>
	</div>

	<script>
		function Page() {}

		$.extend(Page.prototype, {
			init: function() {
				this.bindEvents()
			},
			bindEvents: function() {
				var btn = $('#btn');
				btn.on('click', $.proxy(this.handleBtnClick, this))
			},
			handleBtnClick: function() {
				var inputElem = $("#input");
				var inputValue = inputElem.val();
				var ulElem = $("#list");
				ulElem.append('<li>' + inputValue + '</li>');
				inputElem.val('');
			}
		})

		var page = new Page();
		page.init();
	</script>
</body>
</html>